<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
    window.onload=function()
    {
        //获取body标签
        //此方法相对麻烦
        //var body=document.getElementsByTagName("body");

        //在document中有一个属性body，他保存的是body的引用
        var body=document.body;
        console.log(body);

        //document.documentElement保存的是html根标签
        var html=document.documentElement;
        console.log(html);

        //all代表页面上的所有元素
        //document.getElementsByTagName("*")也一样代表所有元素
        var all=document.all;
        //console.log(all);
        console.log(all.length);
        //对此进行遍历
       // for(var i=0;i<all.length;i++)
        //{
            //console.log(all[i]);
        //}

        //根据元素的class属性值查询一组元素节点对象
        //getElementsByClassName()可以根据class属性值获取一组元素节点对象
        //但是不支持IE8及以下的浏览器
        //var box1=document.getElementsByClassName("box1");
        //console.log(box1.length);

        //获取class为box1中的所有的div
        //使用css选择器
        //document.querySelector()
        //需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
        //虽然IE8中没有getElementByClassName()但是可以使用querySelector()代替
        //但是该方法有个问题在于，如果满足条件的有多个，那么只返回第一个
        var div=document.querySelector(".box1 div");
        var box1=document.querySelector(".box1");
        console.log(div.innerText);
        console.log(box1.innerText);
        
        //该方法与上面类似，但是不同的是他会将符合条件的元素全部封装到一个数组中返回
        //即使符合条件的元素只有一个，他也会返回数组
        var box1=document.querySelectorAll(".box1");
        console.log(box1);
    };
    </script>
</head>
<body>
    <div class="box1">
        <div>我是box1中的文档</div>
        <div>我是box2中的文档</div>
    </div>
    <div class="box1">
        <div>我是box1中的文档</div>
        <div>我是box2中的文档</div>
    </div>
    <div></div>
</body>
</html>